<template>
    <el-card>
        <CreateInform v-model:show="show" @reload="getInformList()"/>
        <el-button type="primary" size="large" style="width: 100%"
                   @click="create">新建通知公告
        </el-button>
        <div v-loading="loading">
            <div v-if="informList.length" class="list">
                <el-table :data="informList" style="width: 100%" stripe lazy highlight-current-row
                          @row-click.self="check"  :row-key="row => row.id">
                    <el-table-column fixed type="index" label="序号" width="75px" align="center"/>
                    <el-table-column prop="title" :formatter="formattedTitle" label="主题" width="auto" align="center"/>
                    <el-table-column prop="date" :formatter="formattedDate" label="发布日期" width="160px" sortable align="center"/>
                    <el-table-column fixed="right" width="75px" align="right">
                        <template #default="{row}">
                            <el-button bg type="danger" size="small" @click.native.stop="remove(row)" column-key>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-empty v-else :image-size="200"/>
        </div>
        <Pagination :total="total" v-model:currentPage="currentPage" v-model:pageSize="pageSize"
                    v-model:informList="informList" v-model:loading="loading"/>
    </el-card>
</template>

<script setup>
import {onMounted, ref} from 'vue'

import {useRouter} from "vue-router";
import {useUserStore} from "@/stores/user";
//新建窗口
import CreateInform from "@/views/User/MyInform/components/CreateInform.vue";
//分页
import Pagination from "@/views/User/MyInform/components/Pagination.vue";

//api接口
import {deleteInformByIdApi, getInformListByUser} from "@/apis/inform";

const router = useRouter()

const userStore = useUserStore()

let show = ref(false)
//列表
let loading = ref(true)
let informList = ref([])

//分页信息
let total = ref(0)
let currentPage = ref(1)
let pageSize = ref(10)

//获取公告列表数据
const getInformList = () => {
    getInformListByUser(currentPage.value,pageSize.value).then(
        res => {
            informList.value = res.data.content
            total.value = res.data.totalElements
            loading.value = false
        }
    )
}
const create = () => {
    show.value = true
}
const remove = row => {
    ElMessageBox.confirm(
        '确定删除吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async ()=>{
        await deleteInformByIdApi(row.id)
        ElMessage.success(`删除${row.title}成功`)
        getInformList()
    }).catch()
}
const check = row => {
    const {href} = router.resolve({
        name: "previewInform",
        params: {id: row.id}
    })
    window.open(href, "_blank")
}

onMounted(()=>getInformList())
const formattedTitle = row => row.title.slice(row.title.lastIndexOf("}")+1)
//日期格式化
const formattedDate = row => {
    if (!row.date) return
    const date = new Date(row.date)
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`
}
</script>

<style scoped lang="scss">

.list {
    margin: 1em 0;
}
</style>

